<script setup lang="ts">

import { ref, onMounted, onUnmounted } from 'vue'
const textEl: any = ref(null)
const text = '持续搬砖搬砖搬砖'
const speed = 300
let idx = 1
let timer: any = null
onMounted(() => {
    autoText()
    function autoText() {
        textEl.value.innerText = text.slice(0, idx)
        idx++
        if (idx > text.length) {
            idx = 1
        }
        timer = setTimeout(autoText, speed)
    }

})
onUnmounted(() => {
    clearTimeout(timer)
})
</script>
<template>
    <div ref="textEl" class="text">
        We Love Programming!
    </div>
</template>
<style lang="scss" scoped>
.text {
    color: var(--el-color-primary);
    font-weight: 700;
    margin-top: 5px;
}
</style>